import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { fileURLToPath, URL } from 'node:url'

import path from 'node:path'
const resolve = (dir: string) => path.resolve(process.cwd(), dir)
// const pathSrc = resolve('src')

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./subtree', import.meta.url))
    },
    // 引入文件时，可以忽略以下的文件扩展名（后缀）
    extensions: ['.js', '.mjs', '.ts', '.vue', '.josn', '.css']
  },
  //插件
  plugins: [
    vue(),
    // svg图标插件
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve('src/assets/icons'), resolve('src/assets/error')],
      // 指定symbolId格式,类名
      symbolId: 'icon-[dir]-[name]'
    })
  ],
  // 打包构建
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'js/[name]-[hash].js', // 入口文件
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames(assetInfo) {
          if (assetInfo.name?.endsWith('.css')) {
            return 'css/[name].[hash].css'
          }
          if (
            ['png', 'svg', 'jpg', 'jpeg', 'gif', 'ico', ''].some((ext) =>
              assetInfo.name?.endsWith(ext)
            )
          ) {
            return 'images/[name].[hash].[ext]'
          }
          if (
            ['ttf', 'woff', 'woff2', 'eot'].some((ext) =>
              assetInfo.name?.endsWith(ext)
            )
          ) {
            return 'fonts/[name].[hash].[ext]'
          }
          return 'assets/[name].[hash].[ext]'
        }
        // manualChunks(id) {
        //   // 分开打包，方便构建，下面文件基本不变；
        //   // 把node_modules下的文件单独打包在vendor文件中；
        //   if (id.includes('node_modules')) {
        //     return 'vendor'
        //   }
        // }
      }
    }
  },
  css: {
    // 预处理器选项
    preprocessorOptions: {
      // scss选项
      scss: {
        // 使用现代编译器
        api: 'modern-compiler',
        // 启用JavaScript
        javascriptEnabled: true,
        // 添加额外的数据
        additionalData: "@use '@/assets/styles/variable.scss' as *;"
      }
    }
  },
  server: {
    port: 5000,
    host: 'localhost',
    strictPort: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000'
        // changeOrigin: true
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true,
    hmr: {
      overlay: true
    }
  }
})
